<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增培训信息')"/>
    <th:block th:include="include :: select2-css"/>
</head>
<style>
    .title {
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 10px;

    }

    .fixed-table-body {
        height: auto !important;
    }
</style>
<body>
<div class="main-content" id="dv">
    <div class="col-sm-12 ">
        <form id="user-form">
            <div class="select-list">
                <ul>
                    <li>
                        姓名：<input type="text" name="name"/>
                    </li>
                    <li>
                        工号：<input type="text" name="badge"/>
                    </li>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                class="fa fa-refresh"></i>&nbsp;重置</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>

    <form id="form-train-add" class="form-horizontal" AUTOCOMPLETE="OFF">
        <input name="id" id="id" type="hidden" th:value="${id}"/>

        <div class="col-sm-12  table-striped">
            <table id="bootstrap-table"></table>
        </div>
        <div class="col-sm-12  table-striped">
            <div class="col-sm-3 title">当前选中人员：</div>
            <!--<div class="col-sm-9">-->
            <!--<span v-for="(item,index) in list" :key="index"><span>{{item}}</span></span>-->
            <!--</div>-->
            <table class="table table-hover" style="text-align: center;">
                <thead>
                <tr>
                    <th style="text-align: center;">工号</th>
                    <th style="text-align: center;">姓名</th>
                    <th style="text-align: center;">操作</th>
                </tr>
                </thead>
                <tbody v-if="list[0].name!=undefined" v-for="(item,index) in list" :key="index">
                <tr>
                    <td>{{item.badge}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <a @click="del(index)" class="btn btn-danger multiple" type="button"><i
                                class="fa fa-remove"></i>
                            <span class="bold">删除</span>
                        </a>
                    </td>

                </tr>
                </tbody>
            </table>
        </div>
    </form>


</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-table-editable-js"/>
<th:block th:include="include :: vue-js"/>
<script th:inline="javascript">
    var prefix = ctx + 'trainManage';
    var overAllIds = new Array(); //全局数组
    var overAllNames = new Array(); //全局数组
    var trainId = $("#id").val();
    var TrainEmp = [[${TrainEmp}]];

    var vm = new Vue({
        el: '#dv',
        data: {
            list: [],
            eid: ''
        },
        methods: {
            del(index) {
                overAllIds.splice(index, 1);
                overAllNames.splice(index, 1);
                TrainEmp.splice(index, 1);
                this.eid = '';
                this.list = overAllNames;
                for (var i in overAllIds) {
                    this.eid += overAllIds[i] + ',';
                }
                if (this.eid.length > 0) {
                    this.eid = this.eid.substr(0, this.eid.length - 1);
                }
            }
        }
    })
    $(function () {

        for (var i in TrainEmp) {
            overAllNames.push({
                'badge': TrainEmp[i].badge,
                'name': TrainEmp[i].name
            })
            overAllIds.push(TrainEmp[i].eid);

        }
        vm.list = overAllNames;
        for (var i in overAllIds) {
            vm.eid += overAllIds[i] + ',';
        }
        if (vm.eid.length > 0) {
            vm.eid = vm.eid.substr(0, vm.eid.length - 1);
        }
        PersonnelInformation();
    });

    function PersonnelInformation() {
        var id = $("#id").val();
        var options = {
            code: "id",
            uniqueId: "id",
            url: prefix + '/findEmp?trainId=' + id,
            modalName: "选择员工",
            height: $(window).height() - 110,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            columns: [{
                checkbox: true,
                formatter: function (i, row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
                    if ($.inArray(row.customerId, overAllIds) != -1) { //  判断数组里有没有这个 id
                        return {
                            checked: true// 存在则选中
                        }
                    }
                }
            }, {
                field: 'badge',
                title: '工号'
            }, {
                field: 'name',
                title: '姓名'
            }]


        };
        $.table.init(options);
    }

    function examine(type, datas) {
        if (type.indexOf('uncheck') == -1) {
            $.each(datas,
                function (i, v) {
                    // 添加时，判断一行或多行的 id 是否已经在数组里 不存则添加　
                    if (overAllIds.indexOf(v.eid) == -1) {
                        overAllIds.push(v.eid)
                        overAllNames.push({
                            'badge': v.badge,
                            'name': v.name
                        })
                    } else {
                        overAllIds.indexOf(v.eid) == -1
                    }

                });
        } else {
            // $.each(datas, function (i, v) {
            //     overAllIds.splice(overAllIds.indexOf(v.eid), 1); //删除取消选中行
            //     overAllNames.splice(overAllNames.indexOf(v.name, v.badge), 1); //删除取消选中行
            // });
        }
    }

    $('#bootstrap-table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table', function (e, rows) {
        var datas = $.isArray(rows) ? rows : [rows]; // 点击时获取选中的行或取消选中的行
        examine(e.type, datas); // 保存到全局 Array() 里
        vm.list = overAllNames;
        var eid = '';
        for (var i in overAllIds) {
            eid += overAllIds[i] + ',';
        }
        if (eid.length > 0) {
            eid = eid.substr(0, eid.length - 1);
        }
        vm.eid = eid;


    });

    function submitHandler() {
        console.log(vm.eid);
        $.ajax({
            url: prefix + '/addEmp',
            data: {
                "trainId": trainId,
                "AllEmpEid": vm.eid
            },
            methods: 'POST',
            success: function (data) {
                if (data.message == '成功') {
                    $.modal.close();
                    parent.$.table.refresh();
                }
            },
        })
    }

</script>

</body>
</html>
